<script setup>
import { computed } from 'vue'
import dayjs from 'dayjs'
import { useSetting } from '@/stores/setting'
import { useNote } from '@/stores/note';

const Note = useNote()
const Setting = useSetting()

// { "isSelected": true, "type": "current-month", "day": "2022-10-26", "date": "2022-10-26T01:21:04.150Z" }
const valueCalendar = ref(new Date()); // 日历选中的日期

// 日历每一项要获取对应的tags，每一项要输入自己的天数
const getTagsByDate = computed(() => (date) => {
  return Note.tags.filter((tag) => {
    return dayjs(tag.noteTime).format("YYYYMMDD") == dayjs(date).format("YYYYMMDD");
  })
})

// 给选中日期绑定对应tag
const clickTag = (tagContent) => {
  let noteJson = JSON.stringify({
    noteTime: dayjs(valueCalendar.value).format("YYYY-MM-DD HH:mm:ss"),
    noteContent: tagContent, noteType: 'tag'
  })
  myPost("/note/release", { noteJson, userToken: User.token }, note => {
    // 这个接口返回插入数据的id
    console.log(note.noteId, "发送一条tagNote成功")
    Note.tags.push({
      noteContent: tagContent, noteId: note.noteId, noteTime: valueCalendar.value, noteType: "tag",
    })
  })
}

// 点击日历格子里的标签关闭
const tabNoteClose = (tag) => {
  myPost("/note/delete", { noteId: tag.noteId, userToken: User.token }, (data) => {
    console.log(data, "删除一条tagNote成功");
    Note.tags.splice(Note.tags.indexOf(tag), 1);
  })
}
</script>

<template>
  <!-- {{ Note.tags }} -->
  <!-- {{dayjs(valueCalendar).format("YYYY-MM-DD HH:mm:ss")}} -->
  <div>
    <!-- 建立标签 -->
    <el-tag v-for="tag in Setting.noteSetting.calendarTags" :key="tag" size="large" @click="clickTag(tag)"
      class="tags-top">
      {{ tag }}
    </el-tag>
  </div>

  <!-- 日历 -->
  <el-calendar v-model="valueCalendar">
    <!-- 单元格 -->
    <template #date-cell="{ data }">
      <div>
        {{ dayjs(data.date).format("D") }}<br />
        <div>
          <el-tag v-for="tag in getTagsByDate(data.date)" :key="tag" closable @close="tabNoteClose(tag)"
            style="max-width:100%;">
            {{ tag.noteContent }}
          </el-tag>
        </div>
      </div>
    </template>

  </el-calendar>
</template>

<style scoped lang="less">
.tags-top {
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}


/* 整个日历表格的内边距 */
::v-deep(.el-calendar__body) {
  padding: 0px;
}

/* 日历格子的内边距 */
::v-deep(.el-calendar-day) {
  padding: 1px;
  height: 100%;
}

.el-calendar ::v-deep(.el-tag) {
  padding: 0px 4px;
}

/* 日历格子里标签文本的样式 */
.el-calendar ::v-deep(.el-tag__content) {
  padding: 1px;
  /* 超出省略号（单行） */
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}

/* .el-calendar ::v-deep(.el-calendar-table) {
  min-height: 1000px;
} */

.el-calendar ::v-deep(.el-calendar-table__row) {
  height: 100px !important;
}
</style>